<template>
  <el-page-header @back="goBack">
    <template #content>
      <span>录入新学生信息</span>
    </template>
  </el-page-header>
  <el-divider></el-divider>
  <el-form ref="studentAddForm" style="width: 360px;" 
  :rules="rules" :model="newStudent" :status-icon="true" label-width="auto">
    <el-form-item label="学号" prop="studentNo">
      <el-input type="text" v-model="newStudent.studentNo" placeholder="学号" />
    </el-form-item>
    <el-form-item label="姓名" prop="name">
      <el-input type="text" v-model="newStudent.name" placeholder="姓名" />
    </el-form-item>
    <el-form-item label="性别" prop="gender">
      <el-radio-group v-model="newStudent.gender">
        <el-radio value="男">男</el-radio>
        <el-radio value="女">女</el-radio>      
      </el-radio-group>
    </el-form-item>
    <el-form-item label="出生日期" prop="dob">
      <el-date-picker
        v-model="newStudent.dob"
        type="date"
        placeholder="选择出生日期"
      />
    </el-form-item>
    <el-form-item label="班级" style="align-items: center;" prop="studentClass">
      <el-select
        v-model="newStudent.studentClass"
        placeholder="选择班级"       
      >
        <el-option
          v-for="c in clazz"
          :key="c"
          :label="c"
          :value="c"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="手机号" prop="mobileNumber">
      <el-input type="text" v-model="newStudent.mobileNumber"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button 
      round type="primary" @click="onAddButtonClick(studentAddForm)">保存      
      </el-button>
    </el-form-item>

  </el-form>
</template>

<script setup>
import { ref, reactive } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus'
import router from '@/router.js'

const newStudent = reactive({
  studentNo: '',
  name: '',
  studentClass: '',
  gender: '',
  mobileNumber: '',
  dob: null
})
const studentAddForm = ref(null);

const clazz = ref([
  '软件212', '软件213', '软件214'
])

const rules = {
  studentNo: [
    { required: true, message: '请输入学号'},
    { pattern: /^\d{8}$/, message: '请输入8位数字学号', trigger: 'blur'}
  ],
  name: [
    {
      required: true, 
      message: '请输入学生姓名',
      transform(value) {
        return value.trim();
      }
    }
  ],
  studentClass: [
    { required: true, message: '请选择学生班级'}
  ],
  gender: [
    { required: true, message: '请选择学生性别'}
  ],
  dob: [
    { required: true, message: '请选择出生日期'}
  ],
  mobileNumber: [
    {
      pattern:  /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
      message: '请输入有效手机号',
      trigger: blur
    }
  ]
}

async function onAddButtonClick(formEl) {
  let api = '/api/students/new-student';
  if (!formEl) return;

  await formEl.validate(async (valid, fields) => {
    if(valid) {
      try {
        res = await axios.post(api, newStudent);
        ElMessage({
          message: '添加学生成功。',
          type: 'success',
        })
      } catch(err) {
        ElMessage({
          message: '访问后端接口出错。',
          type: 'error',
          showClose: true,
          duration: 0
        })
        console.error(err);
      }      
    } else {
      console.log('表单验证失败', fields)
    }
  })
}

function goBack() {
  router.push('/students');
}
</script>